<template>
    <div>
        <header class="head-top">
        <a href="javascript:void(0)" class="backbtn" @click="backClick"></a>
        <div class="content">狗狗能不能吃</div>
        <a href="javascript:void(0)" class="more" @click="moreClick"></a>       
    </header>
    <div class="menuBox-nav flex" v-if="type" :class="{'active' :isActive}">
        <a href="/index" class="to">
            <p class="mNavIco1 bcg"></p>
            <div>首页</div>
        </a>
        <a href="/classify" class="to">
            <p class="mNavIco2 bcg"></p>
            <div>商品分类</div>
        </a>
        <a href="/cart" class="to">
            <p class="mNavIco3 bcg"></p>
            <div>购物车</div>
        </a>
        <a href="/user" class="to">
            <p class="mNavIco4 bcg"></p>
            <div>我的e宠</div>
        </a>
    </div>
    
    </div>
</template>

<script>
import Vue from 'vue';

export default {
    data() {
        return {
            type:false,
            isActive : false,
            
        }
    },
    methods:{
        backClick() {
            this.$router.back();
        },
        moreClick() {
            if(!this.type) {
                this.type = true
                
            } else {
                this.type = false
            }
            this.isActive = true
        }
    },
}
</script>

<style scoped lang = "stylus">
.active
    transition: all 3s
.head-top
    display flex
    justify-content space-between
    align-items center
    color #333
    background #fff
    width 100%
    height .5rem
    font-size 1.3em
    padding 0 10px
    border-bottom 1px solid #f3f3f3
    text-align center
    .backbtn
        background url(../../assets/img/topIco.png) 0 0 no-repeat
        background-size 35px auto
        display inline-block
        width .35rem
        height .35rem

    .more
        background url(../../assets/img/topIco.png) 0 -70px no-repeat
        background-size 35px auto
        display inline-block
        width .35rem
        height .35rem

    span 
        font-size .9em
    
    .content 
        flex 1
    
.menuBox-nav
    font-size: 14px;
    color: #666;
    text-align: center;
    padding-top: 11px;
    display flex
    .to
        flex 1      
        text-decoration none
        color #666
        .mNavIco1   
            background: url(../../assets/img/navIco.d8881a90.png) -1.72rem -.07rem no-repeat;
            display block
            width .25rem
            height .25rem
            margin: auto;
            background-size: 2.34rem 1.63rem;
        .mNavIco2
            background: url(../../assets/img/navIco.d8881a90.png) -1.72rem -.49rem no-repeat;
            display block
            width .25rem
            height .25rem
            margin: auto;
            background-size: 2.34rem 1.63rem;
        .mNavIco3
            background: url(../../assets/img/navIco.d8881a90.png) -1.72rem -.9rem no-repeat;
            display block
            width .25rem
            height .25rem
            margin: auto;
            background-size: 2.34rem 1.63rem;
        .mNavIco4
            background: url(../../assets/img/navIco.d8881a90.png) -1.72rem -1.33rem no-repeat;
            display block
            width .25rem
            height .25rem
            margin: auto;
            background-size: 2.34rem 1.63rem;
            

</style>